<!-- **i18n版本-->
<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <el-form v-if="crud.props.searchToggle"
               size="small"
               label-width="120px">
        <!-- 搜索 -->
        <el-row :gutter="10">
          <el-col :xs="24"
                  :sm="20"
                  :md="6"
                  :lg="6"
                  :xl="6">
            <!--设备编号-->
            <el-form-item :label="tf('deviceId')">
              <el-input v-model="query.deviceId"
                        clearable
                        :placeholder="tf('deviceId')"
                        class="filter-item"
                        @keyup.enter.native="crud.toQuery" />
            </el-form-item>
          </el-col>
          <el-col :xs="24"
                  :sm="20"
                  :md="6"
                  :lg="6"
                  :xl="6">
            <!--日志内容-->
            <el-form-item :label="tf('log')">
              <el-input v-model="query.log"
                        clearable
                        :placeholder="tf('log')"
                        class="filter-item"
                        @keyup.enter.native="crud.toQuery" />
            </el-form-item>
          </el-col>
          <el-col :xs="24"
                  :sm="20"
                  :md="6"
                  :lg="6"
                  :xl="6" />
          <el-col :xs="24"
                  :sm="20"
                  :md="6"
                  :lg="6"
                  :xl="6">
            <el-form-item label=""
                          label-width="28px">
              <rrOperation :crud="crud" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!--more-button ,slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />

      <!--表单组件-->
      <el-dialog :close-on-click-modal="false"
                 :before-close="crud.cancelCU"
                 :visible.sync="crud.status.cu > 0"
                 :title="crud.status.title"
                 width="55%">
        <el-form ref="form"
                 :model="form"
                 :rules="rules"
                 size="small"
                 label-width="120px">
          <el-row :gutter="10">
            <el-col :xs="24"
                    :sm="20"
                    :md="12"
                    :lg="12"
                    :xl="12">
              <!--设备编号" -->
              <el-form-item :label="tf('deviceId')"
                            prop="deviceId">
                <el-input v-model="form.deviceId" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :xs="24"
                    :sm="20"
                    :md="12"
                    :lg="12"
                    :xl="12">
              <!--日志内容" -->
              <el-form-item :label="tf('log')">
                <el-input v-model="form.log"
                          :rows="3"
                          type="textarea" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer"
             class="dialog-footer">
          <el-button type="text"
                     @click="crud.cancelCU">{{ $t('btn.cancel') }}</el-button>
          <el-button :loading="crud.status.cu === 2"
                     type="primary"
                     @click="crud.submitCU">{{ $t('btn.confirm') }}</el-button>
        </div>
      </el-dialog>

      <!--表格渲染-->
      <el-table ref="table"
                v-loading="crud.loading"
                :data="crud.data"
                size="small"
                style="width: 100%"
                @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection"
                         width="55" />
        <el-table-column prop="deviceId"
                         :label="tf('deviceId')" />
        <el-table-column prop="log"
                         :label="tf('log')" />
        <el-table-column prop="updateBy"
                         :label="tf('updateBy')" />
        <el-table-column prop="updateTime"
                         :label="tf('updateTime')" />
        <!-- v-if="checkPer(['admin','deviceLogDetail:edit','deviceLogDetail:del'])"-->
        <el-table-column :label="$t('btn.operationCol')"
                         width="200px"
                         align="center">
          <template slot-scope="scope">
            <udOperation :data="scope.row"
                         :permission="permission" />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />

      <preview ref="previewForm"
               :module="i18nQry.module" />
    </div>
  </div>
</template>

<script>
import crudDeviceLogDetail from '@/api/deviceLogDetail'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import preview from './component/detail'
import i18nHandler from '@/mixins/i18nHandler'
import i18n from '@/lang'

const defaultForm = { id: null, deviceId: null, log: null, createBy: null, createTime: null, updateBy: null, updateTime: null, version: null }

/** ui国际化初始化参数,菜单模块 menu_code**/
const i18nQry = { module: 'DeviceLogDetail', refer: 't_device_log_detail' }

export default {
  name: 'DeviceLogDetail',
  components: { pagination, crudOperation, rrOperation, udOperation, preview },
  mixins: [presenter(), header(), form(defaultForm), crud(), i18nHandler],

  cruds () {
    return CRUD({ title: i18n.t('DeviceLogDetail.moduleName'), url: 'business/deviceLogDetail/pageList', idField: 'id', sort: 'id', order: 'DESC', crudMethod: { ...crudDeviceLogDetail } })
  },
  data () {
    return {
      permission: {
        add: 'deviceLogDetailController#insert',
        edit: 'deviceLogDetailController#update',
        del: 'deviceLogDetailController#deleteById',
      },

      rules: {
        deviceId: [{ required: true, message: i18n.t('input.required', { t: i18n.t(i18nQry.module + '.deviceId') }), trigger: 'blur' }],
        createBy: [{ required: true, message: i18n.t('input.required', { t: i18n.t(i18nQry.module + '.createBy') }), trigger: 'blur' }],
        createTime: [{ required: true, message: i18n.t('input.required', { t: i18n.t(i18nQry.module + '.createTime') }), trigger: 'blur' }],
      },
    }
  },
  created () {
    this.moduleI18nInit(i18nQry)
    this.crud.optShow = { add: true, edit: true, preview: true, del: false, download: false, reset: true }
  },
  methods: {
    [CRUD.HOOK.beforeRefresh] () {
      return true
    },
  },
}
</script>

<style scoped></style>
